window.addEventListener("load", function () {

  //功能1：鼠标滑过导航栏的时候，显示下面的内容
  let navList = document.querySelectorAll(".header-nav li")
  navList.forEach((item, i) => {
    //为每一个小li添加鼠标滑过事件
    item.onmouseover = function () {

    }
  })

  //功能2：轮播图的广告区域：鼠标滑过的时候，添加active
  let focus_ad_items = document.querySelectorAll(".focus-ad-item")
  focus_ad_items.forEach((items, i) => {
    items.onmouseover = function () {
      //排他思想
      focus_ad_items.forEach((items, i) => {
        items.className = "focus-ad-item"
      })
      this.className = "focus-ad-item active"
    }
  })


  //云速建站模块  
  // 功能3：渲染云速建站
  let list = document.querySelector("#list")
  let cloud_bulid_box = document.querySelector(".cloud-bulid-box")
  render()

  function render() {
    cloud_bulid_box.innerHTML = parentName.map((item, i) => {
      // console.log(item.containsList[i].name);
      // console.log(item.containsList);

      return `  
      <div class="cloud-bulid-item">
      <div class="cloud-bulid-title com-title">
         <div class="cloud-bulid-h h">${item.caption}</div>
        <div class="cloud-bulid-p p">${item.info}</div> 
      </div>

      <div class="cloud-space">
        <i class="iconfont icon-dian dian"></i>${item.standardList[0]} <span>${item.standardList[1]}</span>${item.standardList[2]} 
      </div>

      <div class="cloud-list">
      <ul id="list" class="clear_fix">
      ${item.containsList.map((items, i) => {
       return  `
        <li>
          <span>
            <i class="iconfont  ${items.state ? "icon-zhengque success" : "icon-cuowuicon error"}"></i>
          </span>
          <a href="###">${items.name}</a>
        </li>
        `
      }).join("")//join('')最主要的目的去除，
    }
      </ul>
      </div>

      <div class="shop-show">
        <p class="specs">
        规格 <span>${item.dropdownTitle}</span>
      </p>
      <p class="node">
        节点<select name="" id="selects">
          <option value="">${item.dropdownWrapper[0]}</option>
          <option value="">${item.dropdownWrapper[1]}</option>
        </select>
      </p>
      <div class="price-box">
        <div class="price-l">
          <div class="price-t">
            <span class="price">￥${item.buyprice}</span>/年
          </div>
          <del>原价￥500/年</del>
        </div>
        <div class="price-r price-pay">
          立即购买
        </div>
      </div>
      </div>

    <div class="price-ad">
      <p>
        <span class="iconfont icon-dian dian"></span>
        <span>${item.sizeTips[0]}</span>
      </p>
      <p>
        <span class="iconfont icon-dian dian"></span>
        <span>${item.sizeTips[1]}</span>
      </p>
    </div>

    </div>`

    }).join("")


  }

  //客户案例与精品模板  模块
  //功能01：tab栏目的切换
  let customer_th = document.querySelector(".customer-th") //客户案例的头部
  let customer_tab = customer_th.querySelectorAll("div") //客户案例的tab
  let customer_tb = document.querySelector(".customer-tb") //客户案例的主体
  let customer_con = customer_tb.querySelectorAll("div") //客户案例的每一项内容


  //选项卡点击事件
  customer_tab.forEach((item, i) => {
    customer_tab[i].onclick = function () {
      //排他思想
      customer_tab.forEach((item, i) => {
        item.className = "customer-th-case"
        customer_con[i].className = "customer-tb-item clear_fix"
      })
      //留下自己
      this.className = "customer-th-case active"
      customer_con[i].className = "customer-tb-item conActive clear_fix"
    }
  })

  //定制网站数据渲染
  let make_box = document.querySelector(".make-box")
  make_box.innerHTML = cloudsiteMade.map(function (item, i) {
    return `
      <div class="make-item">
        <div class="make-item-title com-title">
          <div class="cloud-bulid-h h">${item.caption}</div>
          <div class="cloud-bulid-p p">${item.info}</div>
        </div>
        <div class="make-design">
          <div class="make-design-title">:设计服务</div>

          <ul id="list" class="clear_fix">
          ${item.serviceList.map(function (item, i) {
            return `            
            <li>
              <span>
                <i class="iconfont ${item.state ? "icon-zhengque success" : "icon-cuowuicon error"} "></i>
              </span>
              <a href="###">${item.name}</a>
            </li>
            `
          }).join("")
          }
          </ul>

        </div>
        <div class="make-design">
          <div class="make-design-title">:支持服务</div>
          <ul id="list" class="clear_fix">
          ${item.supportList.map((item, i) => {
            return `
            <li>
              <span>
                <i class="iconfont ${item.state?"icon-zhengque-copy success":"icon-zhengque-copy error"} "></i>
              </span>
              <a href="###">${item.name}</a>
            </li>
            `
          }).join("")
        }
          </ul>
        </div>

        <div class="price-box">
          <div class="price-l">
            <div class="price-t">
              <span class="price">￥${item.price}</span>/次起
            </div>
            <p>具体详情，请点击立即购买</p>
          </div>
          <div class="price-r price-pay">
            立即购买
          </div>
        </div>
      </div>
    </div>
    
    `
  }).join("")


  //建站相关 云服务数据渲染
  let make_about_box = document.querySelector(".make_about-box")
  make_about_box.innerHTML = cloudsiteMatch.map(function (item, i) {
    return `
    <div class="make-item make-box-item clear_fix">
    <div class="make-item-title com-title">
      <div class="cloud-bulid-h h">${item.caption}</div>
      <div class="cloud-bulid-p p">${item.info}</div>
    </div>
    <div class="make-design">
      <ul id="list" class="clear_fix">
       ${item.containsList.map(function (items, i) {
         return `
         <li>
         <span>
           <i class="iconfont icon-zhengque-copy success"></i>
         </span>
         <a href="###">${items}</a>
       </li>
         `
       }).join("")
    }
      </ul>
    </div>

    <div class="price-box">
      <div class="price-l">
      ${item.free ? `<div>免费</div>` : 
      `<div class="price-t">
        ${item.oldPrice ? `
        <div class="price-t">
        <span class="price">￥9.00</span>/年起
      </div>
      <p>原价￥33/年起</p>
        `:
        `
        <span class="price">￥9.00</span>/年起
        `}
      </div>`}
      </div>
      <div class="price-r price-pay">
        立即购买
      </div>
    </div>
  </div>
    `
  }).join("")

  //
})